<template>
	<view>
		<uni-popup ref="popup" type="bottom" :safe-area="false" style="z-index: 9999;height:80%;margin-bottom: 20rpx;">
			<view class="selectbg">
				<view class="selectTop">
					<view class="selectName">我的关注</view>
					<image src="https://mcdn.chatgk.com/xcx/static/images/icon/selectcolse.png" @tap="closeChange">
					</image>
				</view>
				<view class="selectTab">
					<view v-for="item in tablist" :key="item.idx" :class="index==item.idx?'active':'tabname'"
						@tap="tabChange(item.idx,item.type)">{{item.name}}</view>
				</view>
				<view class="tableTypeList">
					<scroll-view scroll-y="true" class="scroll-Y">
						<!-- 院校 -->
						<template v-if="index==0">
							<view v-if="likelist.length==0" class="morebox">
								<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png"
									mode=""></image>
								<view class="morebox_1">
									您还没有关注的院校
								</view>
								<view class="morebox_1">
									先去关注您喜欢的院校吧
								</view>
								<view class="morebox_2" @click="goguanzhu(0)">
									<text class="morebox_2_txt">添加院校</text>
								</view>
							</view>
							<view v-else class="tabList" v-for="(item,index) in likelist" :key="index"
								@click="chexboxChange(index)">
								<image :src="item.logoUrl" style="width: 96rpx;height: 96rpx;margin-right: 20rpx;">
								</image>
								<view class="tabName">
									<view class="tabSizeName">
										<view class="tabText"> {{item.cnName}}</view>
										<view class="tabText tabText-remark"> {{item.provinceName}} {{item.cityName}}
										</view>
										<view class="tabTextType">
											<view class="tabtype" v-for="(value,idx) in item.features" :key="idx">
												{{value}}
											</view>

										</view>
									</view>
									<image
										:src="item.checked==false?'https://mcdn.chatgk.com/xcx/static/images/icon/radio.png':'https://mcdn.chatgk.com/xcx/static/images/icon/radio1.png'"
										style="width: 34rpx;height: 34rpx;">
									</image>
								</view>
							</view>
						</template>

						<!-- 专业 -->
						<template v-if="index==1">
							<view v-if="majorList.length==0" class="morebox">
								<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png"
									mode=""></image>
								<view class="morebox_1">
									您还没有关注的专业
								</view>
								<view class="morebox_1">
									先去关注您喜欢的专业吧
								</view>
								<view class="morebox_2" @click="goguanzhu(1)">
									<text class="morebox_2_txt">添加专业</text>
								</view>
							</view>
							<view v-else class="profession" v-for="(item,index) in majorList" :key="index"
								@click="majorChange(index)">
								<view>{{item.name}}</view>
								<image
									:src="item.checked==false?'https://mcdn.chatgk.com/xcx/static/images/icon/radio.png':'https://mcdn.chatgk.com/xcx/static/images/icon/radio1.png'"
									style="width: 34rpx;height: 34rpx;">
								</image>
							</view>
						</template>

						<!-- 职业 -->
						<template v-if="index==2">
							<view v-if="jobList.length==0" class="morebox">
								<image class="noData" src="https://mcdn.chatgk.com/xcx/static/images/wode/noData.png"
									mode=""></image>
								<view class="morebox_1">
									您还没有关注的职业
								</view>
								<view class="morebox_1">
									先去关注您喜欢的职业吧
								</view>
								<view class="morebox_2" @click="goguanzhu(2)">
									<text class="morebox_2_txt">添加职业</text>
								</view>
							</view>
							<view v-else class="profession" v-for="(item,index) in jobList" :key="index"
								@click="jobChange(index)">
								<view>{{item.name}}</view>
								<image
									:src="item.checked==false?'https://mcdn.chatgk.com/xcx/static/images/icon/radio.png':'https://mcdn.chatgk.com/xcx/static/images/icon/radio1.png'"
									style="width: 34rpx;height: 34rpx;">
								</image>
							</view>
						</template>
					</scroll-view>
					<template v-if="likelist.length==0">
						<view class="savebuttons" @tap="saveChange">
							<view class="savebutton-btn">确定</view>
						</view>
					</template>
					<template v-else>
						<view class="savebutton" @tap="saveChange">
							<view class="savebutton-btn">确定</view>
						</view>
					</template>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "selectSchool",
		data() {
			return {
				tablist: [{
					idx: 0,
					name: '院校',
					type: 'school'
				}, {
					idx: 1,
					name: '专业',
					type: 'major'
				}, {
					idx: 2,
					name: '职业',
					type: 'job'
				}],
				index: 0,
				likelist: [], // 保存关注的列表
				majorList: [], // 专业
				jobList: [], // 职业


				savelist: [], // 保存选中的数据
				savemajor: [],
				savejob: [],
				isFillFilter: false, // 是否为一键填报
				selFilterDatas: {},
				schoolValueArr: [],
				majorValueArr: [],
				jobValueArr: []
			};
		},
		methods: {
			goguanzhu(i) {
				if (i == 0) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/searchcollege/home-searchcollege'
					})
				} else if (i == 1) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/searchmajor/seemajor?tab=2'
					})
				} else {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/seejob/seejobnew?tab=2'
					})
				}
			},

			openchange(isFillFilter, selFilterDatas, majorValueArr, jobValueArr) {
				this.isFillFilter = isFillFilter || false

				if (this.isFillFilter) {
					this.selFilterDatas = selFilterDatas || {} //uni.getStorageSync('yjselFilterDatas') || {}
					this.majorValueArr = majorValueArr || [] //uni.getStorageSync('yjmajorValueArr') || []
					this.jobValueArr = jobValueArr || [] //uni.getStorageSync('yjjobValueArr') || []


					const collegeFilterData = this.selFilterDatas["0"] || {}
					const majorFilterData = this.selFilterDatas["1"] || {}
					const jobFilterData = this.selFilterDatas["2"] || {}

					this.schoolValueArr = collegeFilterData['sids'] || []

					for (let key in majorFilterData) {
						const arr = majorFilterData[key] || []
						arr.forEach(item => {
							this.majorValueArr.push(item.code)
						})
					}

					for (let key in jobFilterData) {
						const arr = jobFilterData[key] || []
						arr.forEach(item => {
							this.jobValueArr.push(item.code)
						})
					}

					this.majorValueArr = [...new Set(this.majorValueArr)]
					this.jobValueArr = [...new Set(this.jobValueArr)]

				}


				this.$refs.popup.open('bottom')
				this.$nextTick(() => {
					if (this.index == 0) {
						this.getTypeListChange('school') // 打开页面固定参数
					}
					if (this.index == 1) {
						this.getTypeListChange('major') // 打开页面固定参数	
					}
					if (this.index == 2) {
						this.getTypeListChange('job') // 打开页面固定参数	
					}

				})
			},
			closeChange() {
				this.$refs.popup.close()
			},
			// 删除指定元素信息
			deleteChange(val, value, item) {
				this.index = val.id

				this.likelist.forEach(i => {
					i.checked = val.list.some(item => i.code === item.code);
				});
				this.majorList.forEach(i => {
					i.checked = value.list.some(item => i.code === item.code);
				});
				this.jobList.forEach(i => {
					i.checked = item.list.some(item => i.code === item.code);
				});

				this.getTypeListChange('school') // 初始化数据信息
			},
			// 清除所有
			clearChange() {
				this.index = 0

				this.likelist.forEach(i => {
					i.checked = false
				});
				this.majorList.forEach(i => {
					i.checked = false
				});
				this.jobList.forEach(i => {
					i.checked = false
				});

				this.getTypeListChange('school')
			},
			tabChange(idex, type) {
				this.index = idex
				this.getTypeListChange(type)
			},
			updateSchool(val) {
				if (!this.savelist[this.index]) {
					this.savelist[this.index] = []
				}

				const saveDate = this.savelist[this.index]
				const savedItem = saveDate.find(item => item.cnName == val.cnName);
				const item = this.schoolValueArr.find(code => code == val.code)

				if (item && !savedItem) {
					val.checked = true
					this.savelist[this.index].push(val)
					return true
				}

				return savedItem ? savedItem.checked : false;
			},
			updatemajor(val) {
				if (!this.savemajor[this.index]) {
					this.savemajor[this.index] = []
				}

				const saveDate = this.savemajor[this.index]
				const savedItem = saveDate.find(item => item.name == val.name);
				const item = this.majorValueArr.find(code => code == val.code)

				if (item && !savedItem) {
					val.checked = true
					this.savemajor[this.index].push(val)
					return true
				}

				return savedItem ? savedItem.checked : false;
			},

			updatejob(val) {
				if (!this.savejob[this.index]) {
					this.savejob[this.index] = []
				}

				const saveDate = this.savejob[this.index]
				const savedItem = saveDate.find(item => item.name == val.name);
				const item = this.jobValueArr.find(code => code == val.code)

				if (item && !savedItem) {
					console.log('-------------------', this.savejob[this.index])
					val.checked = true
					this.savejob[this.index].push(val)
					return true
				}

				return savedItem ? savedItem.checked : false;
			},
			chexboxChange(idx) { // 院校
				// 保存当前选中的数据 学校列表
				this.likelist[idx].checked = !this.likelist[idx].checked
				this.savelist[this.index] = [...this.likelist];
			},
			majorChange(idx) { // 专业
				this.savemajor[this.index] = [...this.majorList]
				this.majorList[idx].checked = !this.majorList[idx].checked
			},
			jobChange(idx) { // 职业
				this.savejob[this.index] = [...this.jobList]
				this.jobList[idx].checked = !this.jobList[idx].checked
			},
			saveChange() { // 保存当前选中项
				let data = this.likelist.filter((item) => item.checked)
				let dataVal = this.majorList.filter((item) => item.checked)
				let dataJob = this.jobList.filter((item) => item.checked)
				let saveDate = [...data, ...dataVal, ...dataJob]
				this.$emit('searchChange', saveDate)
				this.closeChange()
			},
			getTypeListChange(val) { // 查询数据列表
				if ((val == 'school' && this.likelist.length > 0) || (val == 'major' && this.majorList.length > 0) || (
						val == 'job' && this.jobList.length > 0)) {
					return
				}
				const that = this

				that.$request.likeList({
						type: val,
						detail: 1
					})
					.then(res => {
						if (res.code == 20000) {
							uni.hideLoading()
							if (that.index == 0) { // 院校
								that.likelist = res.data.schoolDetail.map(item => {
									return {
										...item,
										checked: this.updateSchool(item) // 更新数据
									}
								})
								return
							} else if (that.index == 1) { // 专业
								that.majorList = res.data.majorDetail.map(item => {
									return {
										...item,
										majorname: item.name,
										checked: this.updatemajor(item)
									}
								})
							} else { // 职业
								that.jobList = res.data.jobDetail.map(item => {
									return {
										...item,
										jobname: item.name,
										checked: this.updatejob(item)
									}
								})
							}

						}
					}).catch(err => {
						uni.hideLoading()
					})
			}
		}
	}
</script>
<style>
	@media screen and (max-width: 600px) {

		/* 在小屏幕上应用的样式 */
		uni-popup {
			width: 80%;
			height: 60%;
		}
	}
</style>
<style lang="scss" scoped>
	.morebox {
		margin: auto;
		display: flex;
		flex-direction: column;

		.noData {
			width: 280rpx;
			height: 216rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			margin-top: 60rpx;
		}

		.morebox_1 {
			margin: 0 auto;
			padding-bottom: 10rpx;
			text-align: center;
			color: #999999;
			font-size: 28rpx;
		}

		.morebox_2 {
			width: 232rpx;
			height: 76rpx;
			border-radius: 38rpx;
			border: 1rpx solid #FF3B0A;
			margin: auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.morebox_2_txt {
				font-size: 28rpx;
				color: #FF3B0A;
			}
		}
	}

	.selectbg {
		width: 100%;
		height: 1000rpx;
		background-color: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		// padding-top: 42rpx;
		display: flex;
		flex-direction: column;

		.tableTypeList {
			flex: 1;
			background-color: #F8F8F8;

			.scroll-Y {
				height: 650rpx;
				background-color: #F8F8F8;

				.profession {
					// height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// margin: 10rpx 0;
					width: 85%;
					// height: 234rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 0rpx #F2F2F2;
					border-radius: 10rpx;
					margin: 24rpx 32rpx 0 32rpx;
					padding: 32rpx 16rpx 32rpx 32rpx
				}

				.tabList {
					padding: 32rpx 16rpx;
					background-color: #FFFFFF;
					border-radius: 15rpx;
					margin: 24rpx 32rpx 0 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0rpx 4rpx 8rpx 0rpx #F2F2F2;

					.tabName {
						flex: 1;
						// height: 90rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabSizeName {
							// height: 90rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.tabText {
								font-size: 30rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								color: #464646;
								margin: 0 10rpx;
							}

							.tabText-remark {
								font-size: 24rpx;
								margin: 10rpx;
								font-weight: normal;
							}

							.tabTextType {
								font-size: 20rpx;
								// height: 40rpx;
								width: 62vw;
								color: #999999;
								line-height: 20rpx;
								display: flex;
								// overflow: hidden;
								flex-wrap: wrap;

								.tabtype {
									margin: 5rpx 10rpx;
									border: 1px solid #f0f0f0;
									border-radius: 10rpx;
									padding: 8rpx;
								}

							}
						}

					}
				}

				.tabList:last-child {
					margin-bottom: 300rpx !important;
				}

			}

		}

		.savebutton {
			width: 100%;
			background-color: #FFFFFF;
			height: 128rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.savebutton-btn {
				color: #fff;
				width: 622rpx;
				height: 76rpx;
				line-height: 76rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 38rpx;
				text-align: center;
				background: #FF3B0A;
			}
		}

		.savebuttons {
			width: 100vw;
			background-color: #FFFFFF;
			height: 128rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.savebutton-btn {
				width: 622rpx;
				height: 76rpx;
				line-height: 76rpx;
				// margin: 0 auto;
				background-color: #FF9B9E;
				text-align: center;
				color: #fff;
				border-radius: 38rpx;
			}

		}

		.selectTab {
			height: 72rpx;
			width: 456rpx;
			border-radius: 50rpx;
			// margin: 0 auto;
			background-color: #F5F5F5;
			margin: 0 auto 40rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.tabname {
				width: 146rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.active {
				width: 146rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 44rpx;
				color: #FF3B0A;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.selectTop {
			display: flex;
			// height: 60rpx;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 32rpx;

			.selectName {
				color: #464646;
				font-size: 36rpx;
				font-weight: bold;

				padding: 12rpx 30rpx 10rpx 30rpx;
				position: sticky;
				top: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>